<!-- 数据页 -->
<template>
  <el-input placeholder="昵称" :suffix-icon="Search" v-model="searchName"></el-input>
  <el-button type="primary" @click="searchdata()">搜索</el-button>
  <el-button type="warning" @click="homedatares()">重置</el-button>
  <!-- 弹出框 -->
  <el-dialog v-model="dialogFormVisible" title="管理员权限" width="30%">
    <el-tree ref="treeRef" :data="tkdata" show-checkbox node-key="id"
      :props="defaultProps" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="ditaddok()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 表格 -->
  <el-table :data="tableData" height="700" style="width: 100%; margin-top:20px">
    <el-table-column type="index" width="80" />
    <el-table-column prop="username" label="用户名" width="130" />
    <el-table-column prop="userpws" label="密码" width="180" />
    <el-table-column prop="zcname" label="昵称" />
    <el-table-column prop="pic" label="头像地址" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" @click="editit(scope.row)">
          权限编辑
          <el-icon>
            <Edit />
          </el-icon>
        </el-button>
        <el-button type="danger" @click="deluserdit(scope.row)">
          删除
          <el-icon class="mar">
            <CircleClose />
          </el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页器 -->
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="glnowpage" v-model:page-size="pagesizehh" :small="small" :disabled="disabled"
      :background="background" layout="total, prev, pager, next" :total="datanum" @current-change="handleCurrentChange" />
  </div>
</template>

<script lang="js" setup>
import { nowpagedata, edituserdata, deluserdata } from "@/api/gl.js";
import { ElMessage, ElMessageBox } from 'element-plus'
import {ref, onMounted, reactive, computed, watch} from "vue";
import { loguser } from "@/stores/loginuserdata.js";
const loginuser = loguser()
//弹框数据
const defaultProps = {
  children: 'children',
  label: 'label',
}
const datanum = ref(0)
const tkdata = [
  {
    id: 1,
    label: '是否允许查看管理员数据',
  },
  {
    id: 2,
    label: '编辑删除权限',
  },
  {
    id: 3,
    label: '批量操作权限(新增,批量删除,导出)',
  },
]
//获取tree组件
const treeRef = ref(null)

//弹框是否展示
const dialogFormVisible = ref(false)
//页面展示数据
const tableData = ref([])

//重新获取本页数据函数
const load = async () => {
  const res = await nowpagedata(glnowpage.value,searchName.value,loginuser.id)
  tableData.value = res.data.records
  datanum.value = res.data.total
}
//获取所有数据获取测试
onMounted(async () => {
  load()
})
//提示函数封装
const isok = (res) => {
  if (res) {
    ElMessage({
      message: '成功',
      type: 'success',
    })
  } else {
    ElMessage({
      message: '失败',
      type: 'warning',
    })
  }
}



//绑定输入框参数
const searchName = ref('')
//搜索按钮事件
const searchdata = async () => {
  load()
}
//重置按钮事件
const homedatares = () => {
  searchName.value = ''
  //重新获取全部列表数据
  load();
}

//权限编辑操作
watch(treeRef,()=>{
  treeRef.value.setCheckedKeys(mrarr)
})
//创建
let ditaddok = () => { }
//默认选中数组
let mrarr = []
const editit = async (row) => {
  mrarr = []
  if (row.pmone){
   mrarr.push(1)
  }
  if (row.pmtwo){
    mrarr.push(2)
  }
  if (row.pmthree){
    mrarr.push(3)
  }
  dialogFormVisible.value = true  //出现树状图

  if(treeRef.value != null){
    treeRef.value.setCheckedKeys(mrarr)
  }
  //对二级确认事件重新定义
  ditaddok = async() => {
    const obj = {
      arr:treeRef.value.getCheckedKeys(),
      id:row.id
    }
    //传入修改信息
    const res = await edituserdata(obj)
    dialogFormVisible.value = false
    load();
    isok(res.data)
  }
}




//删除操作
const deluserdit = async (row) => {
  console.log(row.id)
  const res = await deluserdata(row.id);
  isok(res)
  load();
}



//分液器

const glnowpage = ref(1)
const pagesizehh = 100
const handleCurrentChange = (val) => {
  load()
}

</script>

<style>
.el-input {
  width: 200px;
}

.homebtnjiqun {
  margin-top: 10px;
}

.mar {
  margin-left: 5px;
}
</style>